import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './projecthomepage.css'
import reactMixin from 'react-mixin';
import myJs from './projecthomepageJs.js'
import app from '../../../../main.js'

export default class ProjectHomepage extends Component {

  config = {
    navigationBarTitleText: '项目首页'
  }

  constructor() {
    super(...arguments);
    this.state = {
      projects: []
    }
  }

  init() {
    this.getProjects();
    app.showShareMenu();
  }

  offset = 0;
  length = 3;
  isFinish = false; 

  getProjects() {
    let me = this;
    app.get('web/project/many', {offset: this.offset, length: this.length}, function(res) {
      if (res.data.result.length > 0) {
        let list = me.state.projects;
        list = list.concat(res.data.result);
        me.setState({projects: list});
      } else {
        me.isFinish = true;
      }
    });
  }

  // 上拉加载
  onReachBottom() {
    if (!this.isFinish) {
      this.offset = this.offset + this.length;
      this.getProjects();
    }
  }

  render() {
    console.log(this.state.projects);
    var project_list = this.state.projects.map((item) => {
      return <View className='project' onClick={this.navigateTo.bind(this,'../projectdetails/projectdetails?id='+item.id)}>
              <Image className='project-img' src={app.getPath(item.image)}></Image>
              <View className='project-title'>{item.name}</View>
              <View className='project-footer at-row'>
                <View className='at-col at-col-1 at-col--auto text'><Image src={app.imageUri+'img/shijian.png'} className='f-img'></Image>{item.end_time}</View>
                <View className='at-col at-col-1 at-col--auto text'><Image src={app.imageUri+'img/renshu.png'} className='f-img'></Image>{item.doctor_amount}</View>
                <View className='at-col at-col-1 at-col--auto text'><Image src={app.imageUri+'img/bingli.png'} className='f-img'></Image>{item.case_amount}</View>
                <View className='at-col at-col-1 at-col--auto text'><Image src={app.imageUri+'img/zhuangtai.png'} className='f-img'></Image>{item.status}</View>
              </View>
            </View>
    });
    return (
      <View className='project-home'>
        {project_list}
      </View>
    )
  }
}
reactMixin.onClass(ProjectHomepage, myJs);
